import legendaryCore from '../assets/legendaryCore.webp'
import legendaryModule from '../assets/legendaryModule.webp'
import getNextEffects  from '../utils/EffectUtils'
import ResultBody from './ResultBody.jsx'
import { useState } from 'react'
import './LegendaryCraft.css'
import {getEquipmentListByType} from '../utils/EquipmentUtils'
import { ArmorPieces } from '../utils/Equipments'
import {getItemByName} from '../utils/CommonUtils'

export default function LegendaryCraft() {
    const [type, setType] = useState(null)
    const [effects, setEffects] = useState(null)
    const [key, setKey] = useState(Date.now())
    const [cores, setCores] = useState(0)
    const [modules, setModules] = useState(0)
    const [equipmentList, setEquipmentList] = useState(null)
    const [equipment, setEquipment] = useState(null)
    const [part, setPart] = useState('')
    const [partError, setPartError] = useState(false)

    const resetCounter = () => {
        setCores(0)
        setModules(0)
    }

    const updateResult = () => {
        if (equipment.isArmor && !part) {
            setPartError(true)
            return
        } else {
            setPartError(false)
            setEquipment({...equipment, part})
        }
        setEffects(getNextEffects(equipment.masterType, equipment.type))
        setKey(Date.now())
        setCores(cores + 5)
        setModules(modules + 4)
    }

    const handleEquiqmentTypeSelect = (event) => {
        setPart('');
        setEquipment(null);
        setType(event.target.value);
        setEquipmentList(getEquipmentListByType(event.target.value));
    }

    const handleEquiqmentSelect = (event) => {
        setEquipment(getItemByName(getEquipmentListByType(type), event.target.value));
    }

    const handlePartSelect = (event) => {
        setPart(event.target.value)
    }

    return (
        <>
            <div className='statistics'>
                You have wasted:
                <div className='stat-detail'>
                    <div className='number'>
                        {cores}
                    </div>
                    <div className='icon'>
                        &nbsp;
                        <img src={legendaryCore} style={{ width: '50px', height: '50px' }}></img>
                    </div>
                </div>
                <div className='stat-detail'>
                    <div className='number'>
                        {modules}
                    </div>
                    <div className='icon'>
                        &nbsp;
                        <img src={legendaryModule} style={{ width: '50px', height: '50px' }}></img>
                    </div>
                </div>
            </div>
            <div className='selectors'>
                <select id='typeSelector' style={{ width: '200px' }} value={type ? type : ''} onChange={(event) => handleEquiqmentTypeSelect(event)}>
                    <option value={''}>Equipment Type: </option>
                    <option value={'ranged'}>Ranged Weapon</option>
                    <option value={'melee'}>Melee Weapon</option>
                    <option value={'armor'}>Armor</option>
                    <option value={'powerarmor'}>Power Armor</option>
                </select>
            </div>
            {
                type ? 
                <div className='selectors'>
                    <select id='equiqmentSelector' style={{ width: '200px' }} value={equipment ? equipment.name : ''} onChange={(event) => handleEquiqmentSelect(event)}>
                        <option value={''}>Equipment: </option>
                        {
                            equipmentList.map((item, index) => (
                                <option key={index} value={item.name}>
                                    {item.name}
                                </option>
                            ))
                        }
                    </select>
                </div> : ''
            }
            {
                equipment && equipment.isArmor ?
                <div className='selectors'>
                    <select id='partSelector' style={{ width: '200px' }} value={part ? part : ''} onChange={(event) => handlePartSelect(event)}>
                        <option value={''}>Part: </option>
                        {
                            ArmorPieces.map((item, index) => (
                                <option key={index} value={item}>
                                    {item}
                                </option>
                            ))
                        }
                </select>
                </div> : ''

            }
            {partError && <h3 style={{color: 'red', margin: 0}}>You must select a part for armors!</h3>}
            <div id="crafter">
                <div className='resultBody'>
                    {effects ? <ResultBody key={key} effects={effects} equipment={equipment}></ResultBody> : 'Click the button and start crafting!'}
                </div>
                <div className='regenerate-btn'>
                    <button onClick={updateResult} disabled={equipment === null} className='craft-btn'>Craft!</button>
                    <button onClick={resetCounter} className='craft-btn'>Reset Counter</button>
                </div>
            </div>
        </>
    )
}